import * as React from "react";
import "@/css/Login.less"
import {Input, Form, Button, message} from 'antd';
import {axiosRequest} from "@/service";
import cookie from "react-cookies";
import {withRouter } from "@/hooks/withRouter"

type tabItem = {
    name: string,
    index: number,
    isShow: boolean
}

type tabbType = {
    tab: number,
    tabs: Array<tabItem>
}

type stateType = {
    tabb: tabbType,
    userName: string
    passWord: string
}

class Login extends React.Component<any, stateType> {
    constructor(props: any) {
        super(props);

        const tabs = [
            {name: '登录', index: 0, isShow: true},
            {name: '注册', index: 1, isShow: true}
        ]

        this.state = {
            tabb: {
                tab: 0,
                tabs
            },
            userName: '',
            passWord: ''
        }
    }


    handleSubmit = () => {
        const config = {
            url: 'login',
            method: 'post',
            data: {
                account: this.state.userName,
                password: this.state.passWord
            }
        }
        axiosRequest(config).then((res: any) => {

            if (res && res.code && res.code == 200) {
                cookie.save('token', res.token, {expires: new Date(new Date().setFullYear(new Date().getFullYear() +1))})
                cookie.save('userName', res.userName, {expires: new Date(new Date().setFullYear(new Date().getFullYear() +1))})
                this.props.navigate('/')
            } else {
                message.error('登录失败！', res.msg)
                console.log('登录失败！', res)
            }
        }).catch((err: any) => {
            message.error('登录失败！')
            console.log('登录失败！', err)
        })
    }

    changeTabs = (idx: number) => {
        this.setState({
            tabb: Object.assign({}, this.state.tabb, {tab: idx})
        });

    }

    RenderTabs(tabs: Array<tabItem>, tab: number, changeTabs: Function) {
        return tabs.map((item, idx) => {
            if (!item.isShow) {
                return null;
            }
            return (
                <li
                    key={item.index}
                    className={tab === idx ? 'loLi active' : 'loLi'}
                    onClick={() => {
                        changeTabs(idx)
                    }}>
                    <span>{item.name}</span>
                </li>
            )
        })
    }

    loginTsx() {
        return (
            <Form name="basic"
                  initialValues={{remember: true}}
                  autoComplete="off"
                  className="ruleForm"
            >
                <Form.Item name="userName"
                           rules={[{required: true, message: 'Please input your username!'}]}>
                    <Input type="text" placeholder="请输入用户名"
                           onChange={(val: any) => this.setState(Object.assign({}, this.state, {"userName": val.target.value}))}
                           autoComplete="off"/>
                </Form.Item>
                <Form.Item name="passWord"
                           rules={[{required: true, message: 'Please input your username!'}]}>
                    <Input type="password" placeholder="请输入密码"
                           onChange={(val: any) => this.setState(Object.assign({}, this.state, {"passWord": val.target.value}))}
                           autoComplete="off"/>
                </Form.Item>
                <Form.Item>

                    <Button className="login-btn" type="primary" htmlType="submit"
                            onClick={this.handleSubmit.bind(this)}>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        )
    }

    registerJsx() {

        return (
            <Form name="basic"
                  initialValues={{remember: true}}
                  autoComplete="off"
                  className="ruleForm"
            >
                <Form.Item label="用户名：" name="userName"
                           rules={[{required: true, message: 'Please input your username!'}]}>
                    <Input type="text"
                           autoComplete="off"/>
                </Form.Item>
                <Form.Item label="密码：" name="passWord"
                           rules={[{required: true, message: 'Please input your username!'}]}>
                    <Input type="password" autoComplete="off"/>
                </Form.Item>
                <Form.Item label="确认密码：" name="passWord"
                           rules={[{required: true, message: 'Please input your username!'}]}>
                    <Input type="password"
                           autoComplete="off"/>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" onClick={this.handleSubmit.bind(this)}>
                        提交
                    </Button>
                </Form.Item>
            </Form>
        )
    }


    render() {
        const {tabs, tab} = this.state.tabb;
        return (
            <div className="login">
                <span className="logo-font icon-logo">七里香</span>
                <div className="left">
                    <img src={require('@/images/Javascript_Flatline.png')}/>
                    <span>How does it feel to sit quietly in front of a computer and write code? That is another world.</span>
                </div>

                <div className="right">
                    <ul className="lo-tab">
                        {this.RenderTabs(tabs, tab, this.changeTabs)}
                    </ul>
                    <div>
                        {this.loginTsx.call(this)}
                    </div>
                </div>
            </div>
        )

    }
}

export default withRouter(Login)

